<!--- tabs组件 -->
<template>
  <el-tabs
    v-model="tabsValueStr"
    :class="'tabs-box'"
    @tab-click="$emit('change-tabs', $event)"
  >
    <el-tab-pane label="全部" name=" " key="idx" v-if="isShowAll" />
    <template v-for="item in tabsArr">
      <el-tab-pane
        v-if="!item.hidden"
        :label="item.label"
        :name="item.key"
        :key="item.key"
      />
    </template>
  </el-tabs>
</template>

<script>
export default {
  props: {
    tabsValue: {
      type: String,
      default: " ",
    },
    isShowAll: {
      type: Boolean,
      default: false,
    },
    tabsList: {
      type: [Array, Object],
      default: [],
    },
  },
  data() {
    return {
      tabsValueStr: "",
      tabsArr: [],
    };
  },
  watch: {
    tabsValue: {
      handler(now) {
        console.log(now);
        this.tabsValueStr = now || " ";
      },
      immediate: true,
    },
    tabsList: {
      handler(now) {
        this.tabsArr = [];
        if (Array.isArray(now)) {
          this.tabsArr = now;
        } else {
          let arr = [];
          for (let i in now) {
            arr.push(now[i]);
          }
          this.tabsArr = arr.sort((a, b) => a.index - b.index);
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.tabs-box {
  .el-tabs__header {
    margin: 0px;
  }
  .el-tabs__item {
    box-shadow: none !important;
  }
  .el-tabs__nav-wrap {
    margin-bottom: -1px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #f1f1f1;
    height: 1px;
  }
  .el-tabs__item.is-active {
    color: $--color-primary;
  }
  .el-tabs__item:hover {
    color: $--color-primary;
    cursor: pointer;
  }
  .el-tabs__active-bar {
    background-color: $--color-primary;
  }
}
</style>
